import React, {useContext} from 'react';
import {View} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {useMount} from 'ahooks';
import {Button, Text, ListItem, Avatar} from '@rneui/base';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {
  check,
  checkMultiple,
  request,
  PERMISSIONS,
  openSettings,
  RESULTS,
} from 'react-native-permissions';
import GlobalContext from '@/GlobalContext';
import {ApiHost, OssHost} from '@/config/common';
const leftIconSize = 18;
const rightIconSize = 20;

const PersonInfo = () => {
  const dispatch = useDispatch();
  const accountInfo = useSelector(state => state.accountInfo.value);

  let defaultUri = accountInfo?.j_ext_info?.photo_relative_path;
  if (defaultUri) {
    defaultUri = `${OssHost}/${defaultUri}`;
  }
  return (
    <View
      style={{
        minHeight: 80,
        flexDirection: 'row',
        alignItems: 'center',
      }}>
      <Avatar
        size={42}
        rounded={false}
        source={{uri: defaultUri}}
        title={defaultUri ? '' : '头像'}
        titleStyle={{fontSize: 12}}
        containerStyle={{backgroundColor: '#999', borderRadius: 8}}
        avatarStyle={{borderRadius: 8}}
      />
      <View
        style={{
          flex: 1,
          marginLeft: 10,
        }}>
        <Text h4>{accountInfo?.j_ext_info?.nickname || '---'}</Text>
        <Text style={{marginTop: 6}}>账号：{accountInfo?.c_loginname}</Text>
      </View>
    </View>
  );
};

export default () => {
  const navigation = useNavigation();
  return (
    <>
      <ListItem
        onPress={() => {
          navigation.push('MinePerson');
        }}>
        <ListItem.Content>
          <PersonInfo />
        </ListItem.Content>
        <ListItem.Chevron size={rightIconSize} />
      </ListItem>

      <ListItem
        onPress={() => {
          navigation.push('MineService');
        }}
        style={{
          marginTop: 10,
        }}>
        <FontAwesome5 name="globe" size={leftIconSize} />
        <ListItem.Content>
          <ListItem.Title>服务</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron size={rightIconSize} />
      </ListItem>

      <ListItem
        onPress={() => {
          navigation.push('MineSetting');
        }}
        style={{
          marginTop: 10,
        }}>
        <FontAwesome5 name="cog" size={leftIconSize} />
        <ListItem.Content>
          <ListItem.Title>设置</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron size={rightIconSize} />
      </ListItem>

      <ListItem
        onPress={() => {
          openSettings();
        }}
        style={{
          marginTop: 10,
        }}>
        <FontAwesome5 name="wrench" size={leftIconSize} />
        <ListItem.Content>
          <ListItem.Title>系统权限</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron size={rightIconSize} />
      </ListItem>
    </>
  );
};
